<!--
  * 「互动欢乐赛排行榜」页面， 原「个人巅峰赛」页面，现用于五一活动互动
  * @author: Ruan Jiazhen
  * @date: 2024-04-10 17:25:08
-->
<template>
  <div class="page">
    <div class="container">
      <div class="bg">
        <image
          class="bg-img"
          src="https://ustatic.hudongmiao.com/miao/web/disnftop.png"
          mode="widthFix"
        />
        <div class="bg-content">
          <div class="time">活动时间：2024年9月27日-2024年10月7日</div>
        </div>
      </div>
      <div class="rule-btn" @click="openRulesPopup">规则</div>
      <!-- 奖励按钮 -->
      <div class="reward-btn" @click="openRewardPopup">奖励</div>
      <DanmuArea
        class="danmu-area"
        :danmu-list="personalPeakCompetitionRankListBroadcastContent"
      />
      <!-- 我的排名 -->
      <div class="my-ranking">
        <image
          class="bg"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/common-rank-bg.png"
        />
        <div class="avatar">
          <image
            class="avatar-img"
            :src="personInfo202310.avatar || COMMON_IMG_URL.DEFAULT_AVATAR"
            mode="aspectFill"
          />
        </div>
        <div v-if="!isLogin" class="no-login-tip">暂未登录</div>
        <div v-if="isLogin" class="nickname">
          {{ personInfo202310.nickname }}
        </div>
        <div v-if="isLogin" class="total-turnover">
          总积分：{{ personalPeakCompetitionInfo?.score }}
        </div>
        <div v-if="isLogin" class="distance">
          距离上一名还差：
          <text class="num">
            {{ personalPeakCompetitionInfo?.distance }}积分
          </text>
        </div>
        <div v-if="isLogin" class="ranking">
          {{ personalPeakCompetitionInfo?.rank || "99+" }}
        </div>
        <div class="tips">活动期间，多玩红包口袋游戏排名更靠前哦～</div>
      </div>
      <!-- 当前排行榜 -->
      <div class="current-ranking">
        <!-- 标题 -->
        <div class="title">
          <image
            class="title-img"
            src="https://ustatic.hudongmiao.com/miao/activity/dianfen-title_compressed.png"
            mode="aspectFit"
          />
        </div>
        <!-- 更新说明 -->
        <div class="update-tips">
          <span v-for="(text, index) in updateTips" :key="index">
            {{ text }}
          </span>
        </div>
        <!-- 排行榜列表 -->
        <div class="rank-table">
          <!-- 表头 -->
          <div class="rank-header">
            <text class="rank"> 名次 </text>
            <text class="nickname"> 昵称 </text>
            <text class="reward"> 奖励 </text>
          </div>
          <!-- 表格内容 -->
          <div class="rank-body">
            <!-- 为空时显示的内容 -->
            <div
              v-if="personalPeakCompetitionRankList.length === 0"
              class="empty"
            >
              <div class="empty-text">
                <p>暂无排名</p>
                <p>
                  <span class="red">iPhone16 Pro、智能手表</span>等大奖等你来拿
                </p>
              </div>
              <div class="empty-img">
                <image
                  src="https://ustatic.hudongmiao.com/miao/activity/iphone16x.png"
                  class="empty-img-item"
                />
                <image
                  src="https://ustatic.hudongmiao.com/miao/web/dajiang.png"
                  class="empty-img-item"
                />
                <image
                  src="https://ustatic.hudongmiao.com/miao/activity/iwatch.png"
                  class="empty-img-item"
                />
              </div>
            </div>
            <!-- 排名项 -->
            <div
              v-for="(item, index) in personalPeakCompetitionRankList"
              :key="index"
              class="rank-item"
            >
              <!-- 名次 -->
              <div class="rank">
                <image
                  v-if="index <= 2"
                  class="rank-img"
                  :src="rankBorder(index + 1)"
                />
                <text v-else class="rank-num">
                  {{ index + 1 }}
                </text>
                <!-- 头像 -->
                <div class="avatar">
                  <image class="avatar-img" :src="item.avatar" />
                </div>
              </div>
              <!-- 昵称 -->
              <text class="nickname">
                {{ item.nickname }}
              </text>
              <!-- 奖励 -->
              <text
                class="reward"
                :class="{ 'reward--link': item.awardDetailsPopupImg }"
                @click="onClickedReward(item.awardDetailsPopupImg)"
              >
                {{ item.reward }}
              </text>
            </div>
          </div>
        </div>
      </div>
      <ToLoginMask v-if="!isLogin" />
    </div>
  </div>
  <CustomTabBar />
  <RulesPopup
    ref="rulesPopup"
    :rule-key="ACTIVITY_RULE_KEY.ACTIVITY_202406"
    :title="indexPopupTitle"
  />
  <PersonalCompetitionRewardsPopup ref="personalCompetitionRewardsPopup" />
  <AwardDetailsPopup ref="awardDetailsPopup" />
</template>

<script lang="ts" setup>
import PersonalCompetitionRewardsPopup from "@/components/activity-202405/PersonalCompetitionRewardsPopup.vue";
import RulesPopup from "@/components/activity-202405/RulesPopup.vue";
import AwardDetailsPopup from "@/components/AwardDetailsPopup.vue";
import CustomTabBar from "@/components/CustomTabBar.vue";
import DanmuArea from "@/components/DanmuArea.vue";
import ToLoginMask from "@/components/ToLoginMask.vue";
import { INTERACT_WEDDINGWEEK_EDN_TIME } from "@/static/constant/activity-202405-constant";
import {
  ACTIVITY_RULE_KEY,
  IMG_URL as COMMON_IMG_URL,
} from "@/static/constant/view-constant";
import { useActivity202310 } from "@/stores/activity-202310-store";
import { useUser } from "@/stores/user";
import dayjs from "dayjs";

const userStore = useUser();
const { isLogin } = storeToRefs(userStore);
/** 活动弹窗标题 */
const indexPopupTitle = ref("互动婚礼周活动规则");
const activity202310Store = useActivity202310();
const {
  setPersonalPeakCompetitionRankList,
  setPersonInfo202310,
  setRankListBroadcastContent,
} = activity202310Store;
const {
  personInfo202310,
  personalPeakCompetitionInfo,
  personalPeakCompetitionRankList,
  personalPeakCompetitionRankListBroadcastContent,
} = storeToRefs(activity202310Store);


/** 检查并获取信息 */
const checkAndGetInfo = async () => {
  if (!personInfo202310.value.userId && isLogin.value) {
    setPersonInfo202310();
  }
  setPersonalPeakCompetitionRankList();

  if (personalPeakCompetitionRankListBroadcastContent.value.length === 0) {
    setRankListBroadcastContent();
  }
};

onShow(checkAndGetInfo);

// 排行榜图标
const rankBorder = (rank: number) =>
  `https://ustatic.hudongmiao.com/joymew-host-contest/activity-202405/no-${rank}.png`;

const updateTips = computed(() => {
  const endTime = dayjs(INTERACT_WEDDINGWEEK_EDN_TIME);
  const now = dayjs();
  const diff = endTime.diff(now);
  if (diff > 0) {
    return ["（每日24点更新排名）"];
  }

  return ["互动巅峰赛活动已结束,请继续关注后续活动"];
});

// #region 弹窗相关

const currentInstance = getCurrentInstance();

const openRulesPopup = () => {
  (currentInstance?.refs.rulesPopup as InstanceType<typeof RulesPopup>).open();
};

const openRewardPopup = () => {
  (
    currentInstance?.refs.personalCompetitionRewardsPopup as InstanceType<
      typeof PersonalCompetitionRewardsPopup
    >
  ).open();
};

// #endregion

const awardDetailsPopup = ref<InstanceType<typeof AwardDetailsPopup>>();

const onClickedReward = (imgUrl?: string) => {
  if (!imgUrl) return;
  awardDetailsPopup.value?.open(imgUrl);
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;

  width: 100vw;
  height: calc(100vh - env(safe-area-inset-bottom) - $tabBarHeight);
  overflow-x: hidden;
  overflow-y: scroll;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  .container {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    overflow: hidden;

    display: grid;
    grid-template:
      "." 58vw
      "danmu-area" 31.5385vw
      "." 11.2vw
      "my-ranking" auto
      "." 3.0769vw
      "current-ranking" auto
      "." 12.8205vw
      /1fr;
    justify-items: center;

    // 背景
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1000;

      width: 100vw;
      height: 100%;

      background: #70acff;

      .bg-img {
        position: absolute;
        top: 0;
        left: 0;

        width: 100vw;
      }
      .bg-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 404rpx;
        .time {
          text-align: center;
          font-size: 19rpx;
          font-weight: 400;
          color: #ff403c;
        }
      }
    }

    .danmu-area {
      grid-area: danmu-area;
    }

    // 规则按钮和奖励按钮
    .rule-btn,
    .reward-btn {
      position: absolute;
      right: 12px;

      width: 28px;
      height: 28px;

      background: #000;
      border-radius: 50%;
      opacity: 0.6;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 10px;
      line-height: 10px;
      color: #fff;
      text-align: center;
    }

    // 规则按钮
    .rule-btn {
      top: 145px;
    }

    // 奖励按钮
    .reward-btn {
      top: 181px;
    }

    // 我的排名
    .my-ranking {
      grid-area: my-ranking;

      position: relative;

      width: calc(100vw - 32px);

      border-radius: 4px;
      box-shadow: 0 0 0.5128vw 0 #fff inset;

      padding: 12px 16px;
      display: grid;
      grid-template:
        " avatar nickname total-turnover ranking" 25px
        " avatar distance distance ranking" 25px
        " . . . ." 5px
        " tips tips tips tips" 27px
        / min-content max-content 1fr max-content;
      gap: 2px 5px;
      align-items: center;

      // 背景
      .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1000;

        width: 100%;
        height: 100%;
      }

      // 头像
      .avatar {
        grid-area: avatar;
        margin-right: 7px;

        width: 48px;
        height: 48px;
        overflow: hidden;

        border: 1px solid #f1eacf;
        border-radius: 50%;

        .avatar-img {
          width: 100%;
          height: 100%;
        }
      }

      // 未登录提示
      .no-login-tip {
        grid-area: nickname-start/ nickname-start/ ranking-end/ ranking-end;

        width: 100%;
        height: 100%;

        background-color: #ecf8fd;
        border-radius: 8px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 17px;
        color: #333;
      }

      // 昵称
      .nickname {
        grid-area: nickname;

        width: max-content;
        max-width: 35vw;
        height: 100%;
        overflow: hidden;

        font-size: 17px;
        color: #333;
        text-align: end;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      // 总流水
      .total-turnover {
        grid-area: total-turnover;
        align-self: flex-end;

        font-size: 13px;
        color: rgb(0 0 0 / 40%);
      }

      // 差距
      .distance {
        grid-area: distance;
        align-self: flex-start;

        font-size: 15px;
        color: #333;

        .num {
          color: #ff2459;
        }
      }

      // 排名
      .ranking {
        grid-area: ranking;

        width: 50px;

        font-size: 27px;
        font-weight: 700;
        text-align: center;
      }

      .refresh {
        grid-area: refresh;

        width: 50px;
        height: 17px;

        background: #2783ff;
        border-radius: 13px;
        box-shadow: 0 1px 2px 0 rgb(47 128 237 / 25%);

        font-size: 10px;
        line-height: 17px;
        color: #fff;
        text-align: center;
      }

      // 提示
      .tips {
        grid-area: tips;
        justify-self: center;

        width: 100%;
        height: 27px;

        background: #ffcbd2;
        border-radius: 4px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 13px;
        color: #ff403c;
      }
    }

    // 当前排名
    .current-ranking {
      grid-area: current-ranking;

      width: calc(100vw - 32px);

      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 2px 0 #fff inset;

      display: grid;
      grid-template:
        "." 17px
        "title" 6.4103vw
        "." 13px
        "update-tips" 3.8462vw
        "." 18px
        "rank-table" auto;
      justify-items: center;

      // 标题
      .title {
        grid-area: title;

        width: 100%;

        .title-img {
          width: 100%;
          height: 100%;
        }
      }

      // 更新提示
      .update-tips {
        grid-area: update-tips;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        font-size: 13px;
        color: #333;
      }

      // 排行榜
      .rank-table {
        grid-area: rank-table;

        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        // 表头
        .rank-header {
          width: 100%;
          height: 6.9231vw;

          background: #ffe8e1;

          padding: 0 16px;
          display: grid;
          grid-template:
            "rank nickname reward" 1fr
            / 64px 1fr 34vw;
          column-gap: 12px;
          align-items: center;

          font-size: 13px;
          color: #8d8d8d; // 排名

          .rank {
            grid-area: rank;
            justify-self: center;
          }

          // 昵称
          .nickname {
            grid-area: nickname;
          }

          // 奖励
          .reward {
            grid-area: reward;
            justify-self: center;
          }
        }

        // 表格内容
        .rank-body {
          width: 100%;

          background: #fff;

          padding-bottom: 20px;
          display: flex;
          flex-direction: column;
          row-gap: 14px;
          align-items: center;

          .empty {
            margin: 28px 0 126px;

            width: calc(100% - 64px);
            height: 41.3333vw;

            display: flex;
            flex-direction: column;
            align-items: center;

            .empty-text {
              font-style: 19px;
              font-weight: bold;
              color: #FF403C;
              text-align: center;

              .red {
                color: #6147FF;
              }
            }
            .empty-img {
              display: flex;
              column-gap: 44rpx;
              margin-top: 15rpx;
              .empty-img-item {
                width: 160rpx;
                height: 160rpx;
              }
            }
          }

          // 排名项
          .rank-item {
            width: calc(100vw - 32px);

            padding: 0 16px;
            display: grid;
            grid-template:
              "rank nickname reward" 1fr
              / 64px 1fr 34vw;
            column-gap: 12px;
            align-items: center;

            // 名次
            .rank {
              grid-area: rank;
              justify-self: center;

              position: relative;

              width: 64px;
              height: 64px;

              // 图片形式的名次
              .rank-img {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;

                width: 100%;
                height: 100%;
              }

              // 文字形式的名次
              .rank-num {
                position: absolute;
                bottom: 0;
                left: 50%;
                z-index: 1;

                width: 16px;
                height: 16px;

                background: #f1eacf;
                border: 1px solid #f1d465;
                border-radius: 50%;
                box-shadow: 0 0 2px 0 rgb(0 0 0 / 25%) inset;

                transform: translateX(-50%);

                display: flex;
                align-items: center;
                justify-content: center;

                font-size: 11px;
                color: #a88500;
              }

              // 头像
              .avatar {
                position: absolute;
                top: 50%;
                left: 50%;

                width: 42px;
                height: 42px;
                overflow: hidden;

                border: 1px solid #f1eacf;
                border-radius: 50%;

                transform: translate(-50%, -50%);

                .avatar-img {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            // 昵称
            .nickname {
              grid-area: nickname;

              width: 100%;

              font-size: 17px;
              color: #333;
            }

            // 奖励
            .reward {
              grid-area: reward;
              justify-self: center;

              font-size: 12px;
              font-weight: 600;
              color: #ff2459;
              text-align: center;

              &--link {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}
</style>
